/*--
Author: W3layouts
Author URL: http://w3layouts.com
License: Creative Commons Attribution 3.0 Unported
License URL: http://creativecommons.org/licenses/by/3.0/
--*/

/*-- Fonts --*/
@font-face{
	font-family: 'Oswald-Regular';
	src:url(../../fonts/Oswald-Regular.ttf) format('truetype');
}
/*-- Fonts --*/

/*-- Index-Page-Styling --*/

body {
    background: url('../../images/login/bg004.jpg') repeat;
}
h1 {
    text-align: center;
	color: #EF4C89;
	font-size: 50px;
	margin-top: 10px;
	font-family: impact;
}

.contact-form {
    width: 30%;
    margin: 20px auto;
    text-align: center;
}

.signin .user {
    width: 86%;
    margin-bottom: 30px;
    background: #3a4147 url('../../images/login/1.png') no-repeat;
    font-size: 14px;
    padding: 15px 10px 15px 45px;
    border: none;
    border-radius: 4px;
	font-family: arial;
	color: #FFF;
	outline: none;
}
.signin .pass {
    width: 86%;
    margin-bottom: 30px;
    background: #3a4147 url('../../images/login/2.png') no-repeat;
    font-size: 14px;
    padding: 15px 10px 15px 45px;
    border: none;
    border-radius: 4px;
    font-family: arial;
    color: #FFF;
    outline: none;
}

.signin .key {
    width: 86%;
    margin-bottom: 30px;
    background: #3a4147 url('../../images/login/3.png') no-repeat;
    font-size: 14px;
    padding: 15px 10px 15px 45px;
    border: none;
    border-radius: 4px;
	font-family: arial;
	color: #FFF;
	outline: none;
}

.signin input[type="button"] {
    width: 100%;
    padding: 10px;
	font-size: 18px;
	font-family: Oswald-Regular;
	margin-bottom: 5px;
    border: none;
    border-radius: 5px;
	color: #000;
	cursor: pointer;
	outline: none;
}
input[type="button"]:hover {
	color: #FFF;
    background-color: #f88eb6;
	-webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}
form p {
    color: #FFF;
    margin-left: 15px;
    margin-top: 10px;
    font-family: Oswald-Regular;
}
form a {
    color: #FFF;
    text-decoration: none;
    font-family: Oswald-Regular;
}
form a:hover {
    color: #EF4C89;
	-webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}
.footer {
    text-align: center;
    margin-top: 50px;
}
.footer p {
    font-family: Oswald-Regular;
    color: #FFF;
}
.footer a {
    font-family: Oswald-Regular;
    color: #FFF;
    text-decoration: none;
}
.footer a:hover {
    color: #EF4C89;
    text-decoration: underline;
      -webkit-transition: all 0.5s ease-in-out;
      -moz-transition: all 0.5s ease-in-out;
      -o-transition: all 0.5s ease-in-out;
      transition: all 0.5s ease-in-out;
}

/*-- Index-Page-Styling --*/

/*--- Responsinator Code ---*/

@media (max-width:1920px) {
    h1 {
        margin-top: 10px;
    }
    .contact-form {
        width: 30%;
        margin: 120px auto;
    }
    .signin input[type="text"] {
        width: 90.5%;
    }
    .signin input[type="password"] {
        width: 90.5%;
    }
    .footer {
        margin-top: 50px;
    }
}

@media (max-width:1680px) {
    .signin input[type="text"] {
        width: 89%;
    }
    .signin input[type="password"] {
        width: 89%;
    }
}

@media (max-width:1600px) {
    .signin input[type="password"] {
        width: 88.5%;
    }
    .signin input[type="text"] {
        width: 88.5%;
    }
}

@media (max-width:1440px) {
    .signin input[type="button"] {
        width: 101.5%;
    }
}

@media (max-width:1366px) {
    h1 {
        margin-top: 10px;
    }
    .contact-form {
        margin: 90px auto;
    }
    .signin input[type="button"] {
        width: 102%;
    }
}

@media (max-width:1280px) {
    h1 {
        margin-top: 10px;
    }
    .contact-form {
        margin: 80px auto;
    }
    .signin input[type="button"] {
        width: 103%;
    }
}

@media (max-width:1200px) {
    h1 {
        margin-top: 10px;
    }
    .contact-form {
        margin: 80px auto;
    }
    .contact-form {
        width: 35%;
    }
    .signin input[type="text"] {
        width: 86.5%;
    }
    .signin input[type="password"] {
        width: 86.5%;
    }
    .signin input[type="button"] {
        width: 100%;
    }
}

@media (max-width:1080px) {
    .signin input[type="text"] {
        width: 85%;
    }
    .signin input[type="password"] {
        width: 85%;
    }
}

@media (max-width:1050px) {
    .signin input[type="button"] {
        width: 100.5%;
    }
}

@media (max-width:1024px) {
    h1 {
        margin-top: 10px;
    }
    .contact-form {
        width: 40%;
        margin: 100px auto;
    }
    .signin input[type="text"] {
        width: 86%;
    }
    .signin input[type="password"] {
        width: 86%;
    }
    .signin input[type="button"] {
        width: 99.5%;
    }
    .footer {
        margin-top: 50px;
    }
}

@media (max-width:966px) {
    .contact-form {
        margin: 80px auto;
    }
    .signin input[type="button"] {
        width: 101%;
    }
    .footer {
        margin-top: 0px;
    }
}

@media (max-width:900px) {
    .signin input[type="button"] {
        width: 101.5%;
    }
}

@media (max-width:853px) {
    h1 {
        margin-top: 10px;
    }
    .contact-form {
        margin: 70px auto;
    }
    .signin input[type="button"] {
        width: 103%;
    }
}

@media (max-width:800px) {
    .signin input[type="button"] {
        width: 103.5%;
    }
    .footer {
        margin-top: 10px;
    }
}

@media (max-width:768px) {
    h1 {
        margin-top: 10px;
    }
    .contact-form {
        width: 55%;
        margin: 110px auto;
    }
    .signin input[type="button"] {
        width: 99%;
    }
    .footer {
        margin-top: 10px;
    }
}

@media (max-width:736px) {
    h1 {
        margin-top: 10px;
    }
    .contact-form {
        width: 60%;
        margin: 80px auto;
    }
    .signin input[type="text"] {
        width: 86%;
    }
    .footer {
        margin-top: 50px;
    }
    .footer p {
        font-size: 13px;
    }
}

@media (max-width:667px) {
	h1 {
		margin-top: 50px;
	}
	.contact-form {
    	width: 60%;
    	margin: 50px auto;
	}
    .signin input[type="text"] {
        width: 85%;
    }
    .signin input[type="password"] {
        width: 85%;
    }
	.footer {
		margin-top: 75px;
	}
    .footer p {
        font-size: 12px;
    }
}
	
@media (max-width:603px) {
    .signin input[type="button"] {
        width: 100.5%;
    }
}

@media (max-width:600px) {
    .contact-form {
        width: 70%;
        margin: 50px auto;
    }
    .signin input[type="text"] {
        width: 86%;
    }
    .signin input[type="password"] {
        width: 86%;
    }
    .signin input[type="button"] {
        width: 99.5%;
    }
}

@media (max-width:568px) {
	h1 {
    	font-size: 45px;
    	margin-top: 50px;
	}
	.contact-form {
    	width: 60%;
    	margin: 50px auto;
	}
	.signin input[type="text"] {
    	width: 83%;
	}
	.signin input[type="password"] {
    	width: 83%;
	}
	.footer {
    	margin-top: 50px;
	}
    .footer p {
        font-size: 12px;
    }
}

@media (max-width:533px) {
    .signin input[type="button"] {
        width: 101%;
    }
}

@media (max-width:480px) {
    .signin input[type="button"] {
        width: 103.5%;
    }
}

@media (max-width:414px) {
    h1 {
        font-size: 45px;
        margin-top: 80px;
    }
    .contact-form {
        width: 85%;
        margin: 100px auto;
    }
    .signin input[type="button"] {
        width: 99.5%;
    }
    .footer p {
        font-size: 13px;
    }
}

@media (max-width:384px) {
    .contact-form {
        width: 85%;
        margin: 80px auto;
    }
    .signin input[type="button"] {
        width: 100.5%;
    }
    .footer p {
        font-size: 12px;
    }
}

@media (max-width:375px) {
    h1 {
        font-size: 40px;
        margin-top: 60px;
    }
	.contact-form {
        width: 90%;
        margin-top: 60px;
    }
    .signin input[type="button"] {
        width: 100%;
    }
	.footer {
    	margin-top: 100px;
	}
    .footer p {
        font-size: 12px;
    }
}
	
@media (max-width:320px) {
	h1 {
    	font-size: 35px;
    	margin-top: 40px;
	}
	.contact-form {
    	width: 90%;
    	margin: 50px 5px;
	}
	.signin input[type="text"] {
    	width: 86.5%;
	}
	.signin input[type="password"] {
    	width: 86.5%;
	}
	.signin input[type="button"] {
        width: 107%;
        padding: 8px;
    }
	.footer {
    	margin-top: 50px;
	}
	.footer p {
		font-size: 12px;
	}
}

@media (max-width:240px) {
    h1 {
        font-size: 24px;
    }
    .contact-form {
        width: 80%;
        margin: 50px 5px;
    }
    .signin input[type="text"] {
        width: 86%;
    }
    .signin input[type="password"] {
        width: 86%;
    }
    .signin input[type="button"] {
        padding: 5px;
        width: 119%;
    }
    form p {
        font-size: 12px;
        margin-left: 24px;
}
    .footer p {
        font-size: 11px;
    }
}

/*--- Responsinator Code ---*/